<template>
  <a-button type="primary" v-if="hasExportAuth() && config.exportConfig" preIcon="ant-design:export-outlined"
    @click="onExportXls()"> 导出</a-button>
  <a-upload name="file" 
    :showUploadList="false" 
    v-if="hasImportAuth() && config.importConfig && !config.importConfig.showModal"
    :customRequest="(file) => onImportXls(file)"
  >
    <a-button type="primary" preIcon="ant-design:import-outlined">导入</a-button>
  </a-upload>

  <a-button 
    type="primary" preIcon="ant-design:import-outlined"
    v-if="hasImportAuth() && config.importConfig && config.importConfig.showModal"
    @click="handleOpenExcelImport"
  >
    导入
  </a-button>
  <ExcelImportModel @register="registerModal" :importRequest="(file) => onImportXls(file)"/>
</template>

<script lang="ts" setup name="ExcelButton">
import { PropType } from 'vue';
import { usePermission } from '/@/hooks/web/usePermission';
import { useMethods } from '/@/hooks/system/useMethods';
import { useMessage } from '/@/hooks/web/useMessage';
import { useModal } from '/@/components/Modal';
import ExcelImportModel from './ExcelImportModel.vue'
import { isFunction } from 'lodash';
const [registerModal, { openModal }] = useModal()
// 定义 excel 方法所需参数
interface ExcelConfig {
  // 导出配置
  exportConfig: {
    url: () => string;
    // 导出文件名
    name?: string | (() => string);
    // 查询参数
    params?: object;
    //按钮权限
    auth?: string | string[];
  };
  // 导入配置
  importConfig: {
    url: () => string;
    // 是否展示导入模型, 可以对导入进行一些提示以及模板下载
    showModal?: boolean;
    // 模板名称
    name?: string,
    // 提示的文章唯一标识
    tipArticleCode?: string;
    // 导入成功后的回调
    success?: (fileInfo?: any) => void;
    // 导出失败后的回调
    fail?: (error?: any) => void;
    //按钮权限
    auth?: string | string[];
  };
}

const props = defineProps({
  config: {
    type: Object as PropType<ExcelConfig>,
    default: null,
  },
});
//按钮权限问题
const { hasPermission } = usePermission();
//导入导出方法
const { handleExportXls, handleImportXls } = useMethods();

const $message = useMessage();
// 导出 excel
function onExportXls() {
  let { url, name, params } = props.config?.exportConfig ?? {};
  if (url && isFunction(url)) {
    let title = typeof name === 'function' ? name() : name;
    return handleExportXls(title as string, url, params);
  } else {
    $message.createMessage.warn('没有传递 export.url 参数');
    return Promise.reject();
  }
}

// 导入 excel
async function onImportXls(file) {
  let { url, success, fail } = props.config?.importConfig ?? {};
  if (url && isFunction(url)) {
    return handleImportXls(file, await url(), success, fail);
  } else {
    $message.createMessage.warn('没有传递 import.url 参数');
    return Promise.reject();
  }
}

function handleOpenExcelImport() {
  openModal(true, {
    ...props.config.importConfig
  })
}

// 导入按钮权限
function hasImportAuth() {
  let auth = props.config?.importConfig?.auth;
  return auth && auth.length > 0 ? hasPermission(auth) : true;
}

// 导出按钮权限
function hasExportAuth() {
  let auth = props.config?.exportConfig?.auth;
  return auth && auth.length > 0 ? hasPermission(auth) : true;
}
</script>

<style scoped lang="less"></style>
